<template>
  <div class="warp">
    <div class="heads">
      <p>登录</p>
    </div>
    <div class="blank">
      <div class="binding">
        <div class="phone">
          <i class="pull-left">手机号：</i>
          <input class="pull-left" type="number" oninput="if(value.length>11)value=value.slice(0,11)" required
                 v-model="phone" placeholder='账号' @keyup="ispPhone"/>
          <i class="remove" @click="removePhone" v-show="showRemove"></i>
        </div>
        <!--v-if="passShow"-->
        <div class="password">
          <i class="pull-left">密 &nbsp;&nbsp;&nbsp;码：</i>
          <input class="pull-left" type="password" v-model="passWord" placeholder='登录密码'/>
        </div>
        <!--<div class="agree" >-->
        <!--<input type="checkbox" v-model="checked"/>我已阅读并同意遵守<router-link :to="{path: '/statement', query: {native: 0}}">《用户协议》</router-link>-->
        <!--</div>-->
        <div class="yes-botton" @click="login">登录</div>
      </div>
    </div>
    <Popups :isShow.sync="isPopup_payment"  :delayTime="popTip.delayTime || 0" :title="popTip.title">
      <div  :class="['cancel-info', popTip.type === 1 ? 'info-center' : null]" slot="body">
        <span v-html="errorText">
        </span>
      </div>
      <div slot="footer" class="pop-footer-btns">
        <button class="pop-footer-close" @click="goMyBuy" >确定</button>
      </div>
    </Popups>
  </div>
</template>
<script>
import Ajax from "@/mixins/ajax";
import { Popups } from "~/popOut";

const successPayment = {
  title: "",
  type: 1,
  info: ""
};
const loginUrl = "/card-service-web/user/login";

export default {
  /* eslint-disable */
  name: "login",
  mixins: [Ajax],
  components: {
    Popups
  },
  data() {
    return {
      phone: "",
      passWord: "",
      showRemove: false,
      isPopup_payment: false,
      popTip: successPayment,
      errorText: "",
      loginok: true
    };
  },
  watch: {
  },
  mounted() {
  },
  methods: {
    /**
     * 关闭所有弹框
     */
    /* eslint-disable */
    goMyBuy() {
      this.isPopup_payment = false;
    },
    // 登录
    login () {
      if (!this.phone) {
        this.errorText= '请输入手机号';
        this.isPopup_payment=true;
        return false;
      } else if (!/^1(3|4|5|7|8)[0-9]\d{8}/.test(this.phone)) {
        this.errorText= '手机号码格式不正确';
        this.isPopup_payment=true;
        return false;
      }
      this.post(loginUrl,{
        loginName: this.phone,
        password : this.passWord
      }).then(body => {
        localStorage.setItem("token", body.execData.accessToken);
        location.reload()


      });
    },
    ispPhone() {
    },
    removePhone() {
    }
  }
};
</script>
<style scoped>
  .blank {
    background: #fff;
    font-size:.48rem;
    padding: 0.48rem 0.48rem;
  }
  .warp{
    position: fixed;
    top: 0;
    height: 100%;
    background: #fff;
  }
  .phone,
  .password {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 0.3rem;
    background-color: #f7f6f6;
    padding: 0.3rem 0 0.36rem 0.36rem;
  }
  .phone i,
  .password i{
    font-style: normal;
  }
  .phone input, .code input, .password input{
    width: 60%;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    padding: 0 0.08rem 0 0.48rem;
    border: none;
    font-size: 0.51rem;
    color: #2f2f2f;
    background-color: #f7f6f6;
  }
  .pull-left{
    font-size:0.48rem;
    line-height:1.19rem;
  }
  .code input {
    width: 4.5rem;
  }

  .yes-botton {
    width: 8.64rem;
    height: 1.15rem;
    background-color: #d11463;
    border-radius: 0.1rem;
    color: #fff;
    font-size: 0.54rem;
    text-align: center;
    line-height: 1.15rem;
    margin: 0 auto;
  }

  .code_btn {
    background: #fff;
    border-color: #555;
    border-radius: .1rem;
    height:1rem;
    line-height: 1.1rem;
    width:2.7rem;
    font-size:0.42rem;
    margin-top:.2rem;
  }

  .Bindings {
    z-index: 100;
    color: #606060;
    background: #ccc;
  }

  .remove {
    width: 0.8rem;
    height: 0.8rem;
    background: #ccc;
    display: inline-block;
    float: right;
    margin-top: .2rem;
    background: #ccc;
  }

  .agree{
    line-height: 1.08rem;
    font-size: .48rem;
  }

  .agree input{
    -webkit-appearance: checkbox;
    width: .42rem;
    height: .42rem;
    vertical-align: top;
    margin: .33rem .15rem 0 0;
  }
  .pop-footer-btns .pop-footer-close {
    width: 5.01rem;
    height: 1.08rem;
    background-color: #d11463;
    border-radius: 2rem;
    color: #fff;
    font-size: 0.54rem;
  }
  .heads{
    overflow: hidden;
    height: 1.5rem;
    line-height: 1.5rem;
    font-size: 0.6rem;
    text-align: center;
    border-bottom: 1px solid #b7b7b7;
    z-index: 9995;
    background: #fff;
  }
  .heads p{
    font-size: 0.4rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 0.31rem;
    letter-spacing: 0rem;
    color: #000000;
    text-align: center;
    line-height: 1.5rem;
  }
</style>
